<template>
  <el-card class="showCreateTopic" v-show="isShow">
    <div slot="header" class="clearfix">
      <span>{{ isShowTipStatus == 0 ? "添加" : "修改" }}题目</span>
      <el-button
        style="float: left; padding: 3px 0"
        type="text"
        @click="isShowCreateTopic()"
        >取消</el-button
      >
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="onSubmitTopic()"
        >{{ isShowTipStatus == 0 ? "添加" : "修改" }}</el-button
      >
    </div>
    <el-scrollbar class="scrollbarBox">
      <div class="box">
        <el-form ref="item" :model="item" label-width="80px">
          <el-form-item label="题目名称:">
            <el-input
              v-model="item.name"
              style="width: 340px; margin-right: 10px"
              placeholder="格式：(调研对象名称) 的评价"
            ></el-input>
            <el-input v-model="item.weight" type="number" style="width: 140px"
              ><template slot="prepend">权重</template></el-input
            >
          </el-form-item>
          <el-form-item label="是否必填:">
            <el-radio-group v-model="item.required">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="调研对象:" style="text-align: left">
            <el-tag
              v-for="userinfo in item.userinfoList"
              :key="userinfo.id"
              style="margin-right: 10px"
              >{{ userinfo.name }}</el-tag
            >
            <el-tag
              type="warning"
              style="margin-right: 10px; cursor: pointer"
              @click="isShowUpdateUserinfoFun"
              ><i class="el-icon-edit"></i> 编辑
            </el-tag>
          </el-form-item>
          <el-form-item label="评分选项:">
            <el-input
              v-for="(scoreItem, index) in item.optionName"
              :key="index"
              v-model="item.optionName[index]"
              style="width: 100px; text-align: center; margin-right: 10px"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级题目:">
            <div
              class="secondaryBox"
              v-for="(child, index) in item.questions"
              :key="index"
            >
              <el-input
                v-model="child.name"
                style="width: 290px; margin-right: 10px"
                placeholder="请输入标题"
                ><template slot="prepend">标题</template></el-input
              >
              <el-input
                v-model="child.weight"
                type="number"
                style="width: 140px; margin-right: 10px"
                ><template slot="prepend">权重</template></el-input
              >
              <el-button style="color: red" @click="deleteSecondary(index)"
                >删除</el-button
              >
            </div>
            <el-button @click="addSecondary">添加标题</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>

    <UpdateUserinfo
      ref="child"
      @isShowUpdateUserinfo="isShowUpdateUserinfo"
      @onSubmitUserinfos="onSubmitUserinfos"
      :isShow="isShowUpdateUserinfos"
    />
  </el-card>
</template>

<script>
import UpdateUserinfo from "./UpdateUserinfo.vue";
export default {
  name: "",
  props: ["isShow"],
  components: {
    UpdateUserinfo
  },
  data() {
    return {
      optionName:[],
      isShowTipStatus: 0, //0添加，1修改
      item: {
        name: "",
        required: 0,
        weight: 0,
        optionName: ["优秀", "称职", "基本称职", "不称职"],
        userinfoList: [],
        questions: [
          {
            name: "",
            weight: 0
          }
        ]
      },
      id: 0, //修改的索引
      isShowUpdateUserinfos: false, //是否显示人员修改列表
    };
  },
  methods: {
    //添加题目
    onSubmitTopic() {
      if (!this.item.name) {
        this.$message.warning("请先填写题目名称！");
        return;
      } else if (this.item.weight == "") {
        this.$message.warning("请先填写题目权重！！");
        return;
      } else if (this.item.userinfoList.length == 0) {
        this.$message.warning("调研对象不能为空！");
        return;
      } else if (this.item.questions.length == 0) {
        this.$message.warning("二级题目不能为空！");
        return;
      } else {
        let number = 0;
        this.item.questions.forEach((item) => {
          if (!item.name) {
            this.$message.warning("请先填写二级题目名称！");
            return;
          }
          number += parseInt(item.weight);
        });
        if (number != 100) {
          this.$message.warning("二级题目权重总和必须是100！");
          return;
        }
      }
      if (this.isShowTipStatus == 0) {
        this.$emit("onSubmitTopic", this.item);
      } else {
        this.$emit("onSubmitUpdateTopic", this.id, this.item);
      }
      this.isShowTipStatus = 0;
      this.item = {
        name: "",
        required: 0,
        weight: 0,
        optionName: ["优秀", "称职", "基本称职", "不称职"],
        userinfoList: [],
        questions: [
          {
            name: "",
            weight: 0,
          },
        ],
      };
    },
    //修改题目获取旧数据
    updateChangeTip(index, value) {
      this.isShowTipStatus = 1;
      this.item = value;
      this.id = index;
    },
    //获取人员列表
    onSubmitUserinfos(value) {
      this.item.userinfoList = value;
    },
    //显示人员列表
    isShowUpdateUserinfoFun() {
      this.isShowUpdateUserinfos = true;
      this.$refs.child.getUserinfoList();
    },
    //关闭创建题库
    isShowCreateTopic() {
      this.isShowTipStatus = 0;
      this.$emit("isShowCreateTopicMethod");
    },
    //添加二级题目
    addSecondary() {
      this.item.questions.push({ name: "", weight: 0 });
    },
    //删除二级题目
    deleteSecondary(index) {
      this.item.questions.splice(index, 1);
    },
    //是否显示人员修改列表
    isShowUpdateUserinfo() {
      this.isShowUpdateUserinfos = false;
    }
  }
};
</script>

<style scoped>
.showCreateTopic {
  width: 50vw !important;
  min-width: 700px !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.scrollbarBox {
  height: calc(90vh - 80px);
}
.showCreateTopic .box {
  text-align: left;
}
.secondaryBox {
  margin-bottom: 10px;
}
</style>
